<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<%@include file="../common/header.jsp"%>

<title>购物车</title>
<script type="text/javascript">
var interval;
$(function() {
	<c:forEach items="${cartList}" var="cart" varStatus="vs">
		$("#buy-num"+"${vs.count}").val("${cart.num}");
	</c:forEach>
	interval = setInterval(start,100);
});

function reduce(i)
{
	
	var num = $("#buy-num"+i).val();
	if(num==1)
	{
		$("#buy-num"+i).val(num);
	}else{
		num--;
		$("#buy-num"+i).val(num);
	}
}
function start()
{
	var totalPrice = 0;
	for(var i=1;i<="${cartTotal}";i++)
	{
		var number = $("#buy-num"+i).val();
		
		var singleprice =  (document.getElementById('bgj'+i).innerHTML).split("￥")[1];
		
		var price  = number * singleprice;
		totalPrice = totalPrice + price;
		price = "￥" + price;
		document.getElementById('xj'+i).innerHTML = price;
	}
	totalPrice = "￥" + totalPrice;
	document.getElementById('total_price').innerHTML = totalPrice;
	
}

function add(i)
{
	var num = $("#buy-num"+i).val();
	num++;
	$("#buy-num"+i).val(num);
}

function submitCart()
{
	var product_name;
	for(var i=1;i<="${cartTotal}";i++)
	{
		var product_stock = $('#product_stock'+i).val();
		var number = $("#buy-num"+i).val();
		if(number<=0)
		{
			product_name = $('#product_name'+i).val();
			$.messager.alert("消息提醒","商品<font color=red>"+product_name+"</font>数量为0,请正确填写购买数量！", "warning");
			return;
		}
		if(number > product_stock)
		{
			product_name = $('#product_name'+i).val();
			$.messager.alert("消息提醒","商品<font color=red>"+product_name+"</font>数量大于库存,请正确填写购买数量！", "warning");
			return;
		}
	}
	clearInterval(interval);
	
	var cart_id = "";
	<c:forEach items="${cartList}" var="cart" varStatus="vs">
		cart_id += ",${cart.id}";    //,2,3
	</c:forEach>
	
	var nums = "";
	for(var i=1;i<="${cartTotal}";i++)
	{
		var number = $("#buy-num"+i).val();
		nums += ",";
		nums += number;  //,2,33
	}
	
	$.ajax({
		type: "post",
		url: "/TeaShop/home/shopping/order",
		data: {cart_id:cart_id,nums:nums}, 
		dataType: "json", //返回数据类型
		success: function(result){
			if(result.type == 'success'){
				window.location.href = "/TeaShop/home/shopping/order";
			}
			else{
				$.messager.alert("消息提醒", result.msg, "warning");
			}
			
		}
		
	});
	
}

function delete_product(id,product_name)
{
	$.messager.confirm("消息提醒", "确定要删除商品：<font color=red>"+product_name+"</font>吗？", function (data) {
        if (data) {
	        	$.ajax({
	        		type: "post",
	        		url: "/TeaShop/home/shopping/del_cart",
	        		data: {id:id}, 
	        		dataType: "json", //返回数据类型
	        		success: function(result){
	        			if(result.type == 'success'){
	        				$.messager.alert("消息提醒", result.msg, "info",function(){window.location.href="/TeaShop/home/shopping/cart";});
	        			}
	        			else{
	        				$.messager.alert("消息提醒", result.msg, "warning");
	        				
	        			}
	        			
	        		}
	        		
	        	});
        	
        }
        else {
        	return;
        }
    });
	
}
</script>
</head>
<!--宽度1000的购物车样式-->
<body>
<%@include file="../common/common_top.jsp"%>
<div id="shop_cart">
 
<!--提示购物步骤-->

 <div class="prompt_step">
 
 </div>
 <!--购物车商品-->
 <div class="Shopping_list">
  <div class="title_name">
    <ul>
	<li class="checkbox"></li>
	<li class="name">商品名称</li>
	<li class="scj">市场价</li>
	<li class="bdj" style="text-align:center">本店价</li>
	<li class="sl" style="text-align:center">购买数量</li>
	<li class="xj" style="text-align:center">小计</li>
	<li class="cz" style="text-align:center">操作</li>
  </ul>
 </div>
  <div class="shopping">
  <form  method="post" action="">
 <table class="table_list" >
  	<c:set var="totalPrice" value="0"></c:set>
 	<c:forEach items="${cartList}" var="cart" varStatus="vs">
 		<input type="hidden" id="product_stock${vs.count}" value="${cart.tea.stock}">
 		<input type="hidden" id="product_name${vs.count}" value="${cart.tea.name}">
		<tr class="tr">
		    <td class="name">
			  <div class="img"><a href="${cart.tea.href}"><img src="${cart.tea.photo}" style="height:60px;width:60px;"/></a></div>
			  <div class="p_name"><a href="${cart.tea.href}">${cart.tea.name}</a></div>
			</td>
			<td class="scj sp">￥${cart.tea.pre_price}</td>
			<td class="bgj sp" id="bgj${vs.count}">￥${cart.tea.new_price}</td>
			<td class="sl">
			    <div class="Numbers">
				  <a href="javascript:void(0);" onclick="reduce(${vs.count});" class="jian">-</a>
				  <input id="buy-num${vs.count}" name="number" value="${cart.num}" type="text" class="number_text"  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
				 
				  <a href="javascript:void(0);" onclick="add(${vs.count});" class="jia">+</a>
				 </div>
			</td>
			<td class="xj" id="xj${vs.count}">￥${cart.tea.new_price * cart.num}</td>
			<td class="cz">
			 <p><a href="javascript:void(0);" onclick="delete_product('${cart.id}','${cart.tea.name}');">删除该商品</a><P>
		
			</td>
	   </tr>
	   <c:set var="totalPrice" value="${totalPrice + cart.tea.new_price * cart.num}"></c:set>
	</c:forEach>
  
 </table>
 <div class="sp_Operation">
 
     
	 <!--结算-->
	<div class="toolbar_right">
	<br><br>
    <div class="p_Total">
	  <span class="text">商品总价：</span><span class="price sumPrice" id="total_price">￥${totalPrice}元</span>
	</div>
	
	<div class="btn">
	 <a class="cartsubmit" href="javascript:void(0);" onclick="submitCart();"></a>
	 <a class="continueFind" href="/TeaShop/home/product/list"></a>
	</div>
  </div>
  </div>
   </form>
 </div>

 </div>
<!--底部样式-->
</div>
<div class="Copyright">
  <p style="text-align:center"><a href="#">关于我们</a> | <a href="#">隐私申明</a> | <a href="#">成为供应商</a> | <a href="#">茶叶</a> | <a href="#">博客</a> |<a href="#">友情链接</a> | <a href="#">网站地图</a></p>
  <p style="text-align:center">Copyright 2022 - 2022 苏珊荔枝 虾头油饼树枝有限公司 zuipin.cn All Rights Reserved </p>
  <p style="text-align:center">粤ICP备xjjbzyt号-1</p>
   <a href="#" class="return_img"></a>
</div>


<!--结束-->

</body>
</html>
